<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content=""><html>
     <title>faker.js - generate massive amounts of fake data in node.js and the browser</title>
     <script src = "js/jquery.js" type = "text/javascript"></script>
     <script src = "js/prettyPrint.js" type = "text/javascript"></script>
     <script src = "js/faker.js" type = "text/javascript"></script>
     <link href="css/bootstrap.css" media="all" rel="stylesheet" type="text/css" />
      <script>

          $(document).ready(function(e){

            // draws buttons / inputs for all faker methods
            function drawButtons () {
              $('#buttons').html('');

              var str = '';

              var moduleList = '<tr><td colspan="2"><ul>';

              var modules = Object.keys(faker);
              modules = modules.sort();
              modules.forEach(function(module){
                var ignore = ['locale', 'locales', 'localeFallback', 'definitions', 'fake'];
                if (ignore.indexOf(module) !== -1) {
                  return;
                }
                var moduleRow = '<tr><td colspan="2"" class="big"><a name="' + module + '"/>' + module + '</td></tr>';

                moduleList += '<li><a href="#' + module + '">' + module + '</a></li>';

                str += moduleRow;
                
                for (var method in faker[module]) {
                  if (typeof faker[module][method] === "function") {
                    // a function was found, create a button and input for it,
                    // execute the value, and set it
                    var inputID = "button_" + module + "_" + method;
                    var strInput = '';
                    // form inputs string concat
                     var strButton = '\
                      <tr>\
                        <td align="right"><input class="fakerButton" type="button" value="' + module + "." + method +'" id="' + inputID + '"/></td>';

                      // get the default value
                      var val = '';
                      try {
                        val = faker[module][method]();
                      } catch (err) {
                      }

                      // switch input type based on default string / object value being returned
                      if (typeof val === "object") {
                          strInput += '<td><textarea id="' + inputID + "_value" + '">' + JSON.stringify(val, true, 2) + '</textarea></td>\
                        </tr>';
                      } else {
                          strInput += '<td><input size="100" id="' + inputID + "_value" + '" type="input" value="' + val + '"/></td>\
                        </tr>';

                      }
                      str += (strButton + strInput)
                  }
                }
              });
              moduleList += '</ul></td></tr>';
              str = moduleList + str;
              $('#buttons').append(str);

             $('.fakerButton').click(function(e){
                var inputID = $(this).attr('id') + "_value";
                var arr = inputID.split('_');
                var module = arr[1];
                var method = arr[2];
                var val = '';
                try {
                  val = faker[module][method]();
                } catch (err) {
                  
                }
                if (typeof val === "object") {
                  val = JSON.stringify(val, true, 2);
                }
                $('#' + inputID).attr('value', val)
              });
            }

            drawButtons();
   
            var _locales = [];

            for(var locale in faker.locales) {
              _locales.push({ name: locale, title: faker.locales[locale].title})
            }

            _locales = _locales.sort(function(a, b){
              if (a.title < b.title)
                   return -1;
                if (a.title > b.title)
                  return 1;
                return 0;
            });
            
            _locales.forEach(function(item){
              
              $('.locale').append('<option value="' + item.name+ '">' + item.title + '</option>');
            });

            $('.locale').val("en");

            $('.locale').change(function(e){
              var locale = $(this).val();
              faker.locale = locale;
              drawButtons();
              generateName();
            });

            function generateName () {

              // make name contextual to username and email
              var firstName = faker.name.firstName(),
                  lastName = faker.name.lastName();

              var dob = faker.date.past(50, new Date("Sat Sep 20 1992 21:35:02 GMT+0200 (CEST)"));
              dob = dob.getFullYear() + "-" + (dob.getMonth()+1) + "-" + dob.getDate();  // First month is "1"
              $('#inputName').attr("value", faker.name.findName(firstName, lastName));
              // $('#inputGender').attr("value", faker.name.gender());
              $('#inputDob').attr("value", dob);
              $('#inputStreetAddress').attr("value", faker.address.streetAddress());
              $('#inputCityStateZip').attr("value", faker.address.city() + ", " + faker.address.stateAbbr() + " " + faker.address.zipCode());
              $('#inputCountry').attr("value", faker.locales[faker.locale].address.default_country || "");
              $('#inputPhone').attr("value", faker.phone.phoneNumber());
              $('#inputUsername').attr("value", faker.internet.userName(firstName, lastName));
              $('#inputPassword').attr("value", faker.internet.password());
              $('#inputEmail').attr("value", faker.internet.email(firstName, lastName));
              $('#imageAvatar').attr("src", faker.internet.avatar());

            };

            $('#generateName').click(function(){
              generateName();
            });
            generateName();
          });

      </script>
  </head>
  <body>
    
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://github.com/marak/faker.js">faker.js - generate massive amounts of fake data in node.js and the browser</a>
          </div>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="http://github.com/marak/faker.js">Code</a></li>
              <li><a href="http://github.com/marak/faker.js/issues">Issues</a></li>
              
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>

    <div class="container">
    <form class="form-horizontal">
      <fieldset>
        <br/>
        <br/>
        <br/>
        
        <h2>Generate Person Example</h2>
        <br/>
        
        <div class="form-group">
          <label for="select" class="col-lg-2 control-label">Locality</label>
          <div class="col-lg-10">
            <select class="form-control locale">
            </select>
            <br>
          </div>
        </div>
        
        <div class="form-group">
          <div class="col-lg-10 col-lg-offset-2">
            <button id="generateName" type="button" class="btn btn-primary">Generate New</button>
          </div>
        </div>
        <div class="form-group">
          <label for="inputName" class="col-lg-2 control-label">Name:</label>
          <div class="col-lg-10">
            <input type="text" class="form-control" id="inputName" placeholder="Name">
          </div>
        </div>
        <div class="form-group">
          <label for="inputDob" class="col-lg-2 control-label">Date of Birth:</label>
          <div class="col-lg-10">
            <input type="input" class="form-control" id="inputDob" placeholder="Date of Birth">
          </div>
        </div>
        <div class="form-group">
          <label for="inputStreetAddress" class="col-lg-2 control-label">Street Address:</label>
          <div class="col-lg-10">
            <input type="input" class="form-control" id="inputStreetAddress" placeholder="Street Address">
          </div>
        </div>

        <div class="form-group">
          <label for="inputCityStateZip" class="col-lg-2 control-label">City, State Zip:</label>
          <div class="col-lg-10">
            <input type="input" class="form-control" id="inputCityStateZip" placeholder="City, State Zip">
          </div>
        </div>

        <div class="form-group">
          <label for="inputCountry" class="col-lg-2 control-label">Country:</label>
          <div class="col-lg-10">
            <input type="input" class="form-control" id="inputCountry" placeholder="Country">
          </div>
        </div>

        <div class="form-group">
          <label for="inputPhone" class="col-lg-2 control-label">Phone Number:</label>
          <div class="col-lg-10">
            <input type="input" class="form-control" id="inputPhone" placeholder="Phone Number">
          </div>
        </div>

        <div class="form-group">
          <label for="inputUsername" class="col-lg-2 control-label">Username:</label>
          <div class="col-lg-10">
            <input type="input" class="form-control" id="inputUsername" placeholder="Username">
          </div>
        </div>


        <div class="form-group">
          <label for="inputPassword" class="col-lg-2 control-label">Password:</label>
          <div class="col-lg-10">
            <input type="input" class="form-control" id="inputPassword" placeholder="Password">
          </div>
        </div>


        <div class="form-group">
          <label for="inputEmail" class="col-lg-2 control-label">Email:</label>
          <div class="col-lg-10">
            <input type="input" class="form-control" id="inputEmail" placeholder="Email">
          </div>
        </div>

        <div class="form-group">
          <label for="imageAvatar" class="col-lg-2 control-label">Avatar:</label>
          <div class="col-lg-10">
            <img class="" id="imageAvatar"/>
          </div>
        </div>
        <!--
        <div class="form-group">
          <label for="inputGender" class="col-lg-2 control-label">Gender:</label>
          <div class="col-lg-10">
            <input type="text" class="form-control" id="inputGender" placeholder="Gender">
          </div>
        </div>
        -->

      </fieldset>
    </form>
    </div>

    <div class="container">
      <h2>API Reference</h2>
      <p>Click button to generate new value</p>
      <select class="form-control locale"></select>
      <table class="table table-striped table-hover buttonsTable">
        <tbody id="buttons">
        </tbody>
      </table>
    </div>
    <div id="footer">
      <div class="container">
        <br/>
        
        <strong>protip</strong>: open your console on this page and run: <code>console.log(faker); var randomName = faker.name.findName(); console.log(randomName);</code><hr/>
      </div>
    </div>

  </body>
</html>
